<template>
  <el-card class="sourcing-form-card" shadow="never">
    <div slot="header">
      <span>基本信息</span>
    </div>
    <el-row v-loading="basicLoading">
      <el-form ref="form" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="询价类型：">
              <div>{{ basicInfo.inquiryType || "" }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上游制单人：">
              <div>{{ basicInfo.creation || "" }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="询价部门：">
              <div>{{ basicInfo.creationDept || "" }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="询价单号：">
              <div>{{ basicInfo.billNo || "" }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购询价人：">
              <div>{{ basicInfo.creation || "" }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="缺货公司：">
              <div>{{ basicInfo.shortSupplyCompanyName || "" }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="附件信息：">
              <el-upload
                class="upload"
                :disabled="uploadLoading || !!isReadOnly"
                :show-file-list="false"
                :on-success="handleUploadSuccess"
                :on-error="handleUploadError"
                :before-upload="handleBeforeUpload"
                :action="`${uploadBaseURL}fts/fileUpload/upload`"
                :data="uploadParams"
              >
                <el-button :loading="uploadLoading" type="text" :disabled="!!isReadOnly"
                  >上传附件</el-button
                >
              </el-upload>
              <el-button v-if="basicInfo.haveFile == 1" type="text" @click="handleViewQualifies"
                >查看附件</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="询价备注：">
              <el-input type="textarea" rows="1" :readonly="!!isReadOnly" v-model="basicInfo.remark" @change="handleRemarkChange" placeholder="请填写询价备注" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="送货地址：">
              <div>{{ basicInfo.deliveryAddress || "" }}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <AttachmentDialog
      :visible.sync="dialogVisible"
      :fileGroupId="fileGroupId"
    />
  </el-card>
</template>
<script>
import {
  queryBillBaseService,
  saveFileGroupIdService
} from '@api/sourcing/selfPurchaseInquiry'
import AttachmentDialog from '@/pages/sourcing/components/AttachmentDialog'
import { mapMutations } from 'vuex'

export default {
  // 单据基本信息
  props: ['isReadOnly', 'selfPurchaseBillId'],
  components: {
    AttachmentDialog, // 查看附件
  },
  data () {
    return {
      basicLoading: false,
      uploadLoading: false,
      dialogVisible: false,
      fileGroupId: 0,
      basicInfo: {},
      uploadParams: {
        fileUploadUser: '',
        fileType: '',
        departmentId: '',
        fileGroupId: 0,
      }
    }
  },
  watch: {
    selfPurchaseBillId: {
      handler (newVal, oldVal) {
        if (newVal) {
          this.selfPurchaseBillId = newVal;
        }
        this.getBaseInfo()
      },
      immediate: true,
      deep: true
    },
  },
  methods: {
    ...mapMutations('sourcing/selfPurchase', ['SET_REMARK']),
    // 修改备注
    handleRemarkChange (val) {
      this.SET_REMARK(val);
    },
    async getBaseInfo () {
      const res = await queryBillBaseService({ selfPurchaseBillId: this.selfPurchaseBillId }, state => { this.basicLoading = state })
      if (res) {
        const { fileGroupId } = res.data;
        this.fileGroupId = fileGroupId || 0;
        this.getUploadParams(fileGroupId)
        this.basicInfo = res.data;
        // 缓存备注
        if (this.basicInfo?.remark) {
          this.SET_REMARK(this.basicInfo.remark);
        }
      }
    },
    // 获取用户信息
    getUploadParams (fileGroupId) {
      if (!localStorage.getItem('userInfo')) {
        return this.$message.error('获取用户信息失败，请退出重新登录')
      }
      const { userId, userName } = JSON.parse(localStorage.getItem('userInfo'));
      this.uploadParams = {
        fileUploadUser: userId,
        fileUploadUserName: userName,
        departmentId: -1,
        fileType: 290,
        fileGroupId: fileGroupId || 0
      }
    },
    // 查看附件
    handleViewQualifies () {
      this.fileGroupId = this.basicInfo.fileGroupId;
      this.dialogVisible = true;
    },
    // 上传之前
    handleBeforeUpload () {
      this.uploadLoading = true;
    },
    // 上传成功
    handleUploadSuccess (res) {
      this.uploadLoading = false;
      if (res.code == 0) {
        this.$message.success('上传成功')
        if (this.fileGroupId == 0 || !this.fileGroupId) {
          const param = {
            selfPurchaseBillId: this.selfPurchaseBillId,
            fileGroupId: res.fileGroupId,
          }
          saveFileGroupIdService(param).then((res) => {
            if (res) {
              this.getBaseInfo()
            }
          })
        } else {
          this.getBaseInfo()
        }
      } else {
        this.$message.error(res.msg || '上传异常')
      }
    },
    // 上传失败
    handleUploadError () {
      this.uploadLoading = false;
      this.$message.error('导入失败');
    },
  }
}
</script>
<style scoped>
  .upload {
    display: inline;
  }
</style>
